import {
  ModalForm,
  ProFormGroup,
  ProFormInstance,
  ProFormTextArea,
} from '@ant-design/pro-form';
import React, { useRef } from 'react';

type FormProps = {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: string) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, onCancel, onSubmit } = props;
  if (!visible) {
    return <></>;
  }

  // const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const handleFormSubmit = async () => {
    let remark = formRef.current?.getFieldValue('remark');

    onSubmit(remark);
  };

  return (
    <ModalForm<{
      table: API.VpnServerBatchModel[];
    }>
      width={900}
      open={visible}
      title="批量追加备注"
      onFinish={handleFormSubmit}
      formRef={formRef}
      modalProps={{
        onCancel: onCancel,
        //destroyOnClose: false,
        maskClosable: false,
      }}
    >
      {/* <ProForm<API.VpnServerBatchModel>
        formRef={formRef}
        layout="horizontal"
        style={{
          margin: 'auto',
          marginTop: 0,
          marginLeft: 25,
          width: 1400,
          height: 145,
        }}
        submitter={{
          render: (props, doms) => {
            return [];
          },
        }}
        onFinish={handleFormSubmit}
      > */}
        <ProFormGroup>
          {/* <ProFormSelect
            name="status"
            label="状态"
            // placeholder="请选择服务器类型"
            allowClear={true}
            options={[
              {label:'禁用', value :'0'},
              {label:'启用', value :'1'}
            ]}
          />
          <ProFormSelect
            name="blocked"
            label="被墙"
            allowClear={true}
            options={[
              {label:'被墙', value :'1'},
              // {label:'启用', value :'1'}
            ]}
          /> */}
          {/* <ProFormSwitch name="blocked" label="被墙" initialValue={true} /> */}
          <ProFormTextArea name="remark" label="备注" width={800} />
        </ProFormGroup>
      {/* </ProForm> */}
    </ModalForm>
  );
};

export default Form;
